<!-- 顶部导航组件 -->
<template>
  <div id="topbar-wrap" :class="{ topCollapsed: isCollapse }">
    <el-row type="flex" justify="space-between">
      <el-col :span="5">
        <span class="iconfont" v-html="iconName2" @click="toggleSiderBar"></span>
      </el-col>
      <el-col :span="12">
        <el-row type="flex" class="row-right" justify="end" style="margin-right:-15px">
          <el-col :span="5">
            <a class="animated fadeIn">{{$t('topbar.sayHi')}}，{{langType === 'en' ? user.user_name_en : user.user_name}}</a>
          </el-col>
          <el-col :span="2">
            <span class="iconfont" title="切换语言" @click="toggleLanguage">&#xe605;</span>
          </el-col>
          <el-col :span="2">
            <span class="iconfont" v-html="iconName" @click="toggleFullscreen"></span>
          </el-col>
          <el-col :span="2">
            <span class="iconfont logout" @click.prevent="logout">&#xe61d;</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import screenfull from '../assets/libs/screenfull.js'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'topbar',
  data () {
    return {
      userName: localStorage.userName || '',
      isFullscreen: false,
      iconName: '&#xec16;',
      iconName2: '&#xec0c;'
    }
  },
  computed: {
    ...mapState('menu', ['isCollapse']),
    ...mapState('user', ['user']),
    langType () {
      return this.$i18n.locale
    }
  },
  methods: {
    ...mapMutations({
      SET_TOGGLE_SIDER_BAR: 'menu/SET_TOGGLE_SIDER_BAR'
    }),
    toggleSiderBar () {
      this.SET_TOGGLE_SIDER_BAR()
    },
    toggleLanguage () {
      let locale = this.$i18n.locale
      locale === 'zh' ? (this.$i18n.locale = 'en') : (this.$i18n.locale = 'zh')
      let info = locale === 'en' ? '切换成功' : 'change language successfully'
      this.$message.success(info)
    },
    toggleFullscreen () {
      if (!screenfull.enabled) {
        this.$message.warning('您的浏览器不支持全屏')
        return false
      }
      screenfull.toggle()
      // isFullscreen 居然是反的
      this.isFullscreen = !screenfull.isFullscreen
    },
    logout () {
      localStorage.clear()
      this.$bus.$emit('stopMusic')
      this.$router.push('signin')
    }
  },
  watch: {
    $route (to, from) {
      this.pathName = this.$route.path.substring(1)
      this.nowPath = this.$route.path
    },
    isFullscreen (newV) {
      this.iconName = newV ? '&#xec15;' : '&#xec16;'
    },
    isCollapse (newV) {
      this.iconName2 = newV ? '&#xec0b;' : '&#xec0c;'
    }
  }
}
</script>
<style scoped lang="scss">
  #topbar-wrap {
    overflow: hidden;
    /*border-bottom: 1px solid #efefef;*/
    background: #fff;
    color: #353d47;
    padding: 0 15px;
    z-index: 4;
    box-sizing: border-box;
    // box-shadow: 0px 0px 20px rgba(0,0,0,0.03);
    a {
      line-height: 60px;
    }
    /*i {
      font-size: 20px;
      line-height: 60px;
      transition: all 0.5s;
      &:hover {
        cursor: pointer;
      }
    }*/
    .iconfont {
      height: 60px;
      font-size: 26px;
      line-height: 60px;
      align-items: center;
      justify-content: center;
    }
    .fa-language:hover {
      transform: rotateY(180deg);
    }
    .logout {
      text-decoration: none;
    }
  }

  .row-right > div {
    text-align: center;
  }
</style>
